HTML Nav Tag
The HTML Nav Tag <nav> is a semantic element used to group navigation links. It tells browsers and assistive technologies that the contents are a navigation menu — like a main menu, sidebar links, or breadcrumb trail.
What is the Nav Tag?
<nav>is a semantic HTML5 element for navigation.- It contains a set of links that lead to other pages or sections.
- Helps screen readers and search engines identify navigation areas.
- Used for main menus, side menus, footers and breadcrumbs.
Why Use the Nav Tag?
Semantic Meaning
Tells browsers this section is navigation.
Accessibility
Screen readers can skip directly to nav.
SEO Benefit
Search engines understand site structure better.
Easy Styling
Target nav with CSS for menu design.
Responsive
Combine with media queries for mobile menus.
ARIA Friendly
Pair with aria-label for clear roles.
Nav Tag Syntax
- Basic:
<nav> ... </nav> - With list:
<nav><ul><li>Link</li></ul></nav> - ARIA label:
<nav aria-label="Main"> - Breadcrumb: Use
<nav aria-label="Breadcrumb"> - Multiple nav: A page can have several nav elements.
Nav Tag Example
<!DOCTYPE html>
<html>
<body>
<nav aria-label="Main Navigation">
<ul>
<li><a href="/">Home</a></li>
<li><a href="/courses">Courses</a></li>
<li><a href="/contact">Contact</a></li>
<li><a href="/about">About</a></li>
</ul>
</nav>
</body>
</html>
Code Explanation
| HTML Part | Meaning |
|---|---|
| <nav> | Semantic container for navigation links. |
| aria-label | Provides an accessible name for the nav. |
| <ul> | Unordered list of links. |
| <li> | Each list item holds an anchor. |
| <a href> | Hyperlink to a page or section. |
Common Nav Patterns
Use Cases
- Top menus: Primary website navigation.
- Sidebar: Section links in dashboards.
- Breadcrumbs: Show hierarchy of current page.
- Footer links: Quick site-wide links at the bottom.
Practice Questions
- Create a top navigation menu using
<nav>and<ul>. - Build a breadcrumb navigation with the nav tag.
- Add
aria-labelto make nav accessible. - Style your nav with CSS Flexbox horizontally.
Frequently Asked Questions
Why use nav instead of div?
Nav adds semantic meaning and improves accessibility and SEO.
Can I have multiple nav tags?
Yes, one page can have several nav elements (e.g., main and footer nav).
Do I need to use ul inside nav?
Not strictly, but it is best practice for accessibility.
Should I use aria-label?
Yes, especially when multiple navs exist on a page.
Conclusion
The HTML Nav tag is essential for building clear, accessible navigation menus. Use it for main menus, footers, breadcrumbs and any group of links to improve semantics, SEO and the user experience.
Additional Tips
- Use semantic markup: Prefer nav over a styled div.
- Add aria-label: Distinguishes multiple navs.
- Combine with ul/li: Standard menu structure.
- Make responsive: Build mobile hamburger menus.